<template>
  <div>
    <h1>我是App</h1>

    <el-button type="primary" size="default" :icon="Plus">主要按钮</el-button>
    <el-button type="success" size="small" :icon="Edit">编辑按钮</el-button>
    <el-button type="danger" size="default" :icon="Delete">删除按钮</el-button>

    <el-pagination :page-sizes="[100, 200, 300, 400]" layout="total, sizes, prev, pager, next, jumper" :total="400" />

    <Test></Test>
    <Page></Page>
    <hr />
    <div>
      <h1>SVG测试</h1>
      <!--测试SVG图标使用-->
      <!--svg:图标外层容器节点，内部需要与use标签结合使用-->
      <svg style="width: 160px;height: 160px;">
        <!--use标签的fill属性可以设置图标的颜色-->
        <use xlink:href="#icon-car" fill="red"></use>
      </svg>



    </div>

  </div>
</template>

<script setup lang="ts">
//引入图标组件
import { Delete, Edit, Plus } from "@element-plus/icons-vue"
//使用@引入Test.vue组件
// import Test from '@/components/Test.vue'
// import Page from '@/components/Pagination/index.vue'

// import request from '@/utils/request'
// import { onMounted } from "vue";
// onMounted(() => {
//   request({
//     url: '/user/login',
//     // url: '/user/login/asdfg',
//     method: 'post',
//     data: {
//       username: 'admin',
//       password: '111111'
//     }
//   }).then(res => {
//     console.log("request 测试");
//     console.log(res);
//   })
// })

import { onMounted } from "vue";
import { reqLogin } from "./api/user";
onMounted(() => {
  reqLogin({ username: 'admin', password: '111111q' })
})

</script>

<style scoped lang="scss">
div {
  h1 {
    color: red;
  }
}
</style>